<template>
  <div class="box">
    <div class="tabs">
      <div class="tabs-left">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane
            v-for="item in memberList.value"
            :label="item.name"
            :name="item.name"
          >
            <template #label>
              <span class="custom-tabs-label" @click="handleClick(item)">
                <span>{{ item.name }}</span>
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <div class="tabs-content">
          <div class="breadcrumb">
            <div>当前位置：</div>
            <el-breadcrumb separator=">">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>正文</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="mainBody">
            <div class="mainBody-1">{{ list }}</div>
            <div class="sj">
              <img src="../../assets/img/组 5381@2x.png" alt="" />{{ list1 }}
            </div>
            <div class="fwb" v-html="Notice"></div>
            <div class="tiao" @click="Jump()">更多招中标信息 >></div>
          </div>
        </div>
      </div>
      <div class="tabs-right">
        <div class="popularArticles">
          <div class="top">
            <img src="../../assets/img/组 5391@2x.png" alt="" />
            <div class="top-title">热门文章</div>
          </div>
          <div class="heng"></div>
          <div
            class="content"
            v-for="(item, index) in popularList.value"
            :key="index"
          >
            <div
              class="Number"
              :class="{ active: index == 0 || index == 1 || index == 2 }"
            >
              {{ index + 1 }}
            </div>
            <div class="content-1" @click="Jump1(item.id)">
              {{ item.title }}
            </div>
          </div>
          <div style="width: 100%; height: 15px"></div>
        </div>
        <div class="popularArticles" style="margin-top: 10px">
          <div class="top">
            <img src="../../assets/img/路径 4301@2x.png" alt="" />
            <div class="top-title">相关标讯</div>
          </div>
          <div class="heng"></div>
          <div
            class="content"
            v-for="(item, index) in relatedBanners.value"
            :key="index"
          >
            <div
              class="Number"
              :class="{ active: index == 0 || index == 1 || index == 2 }"
            >
              {{ index + 1 }}
            </div>
            <div class="content-1" @click="Jump2(item.nid)">
              {{ item.title }}
            </div>
          </div>
          <div style="width: 100%; height: 15px"></div>
        </div>
        <div class="popularArticles" style="margin-top: 10px">
          <div class="top">
            <img src="../../assets/img/路径 4300@2x.png" alt="" />
            <div class="top-title">热门地区</div>
          </div>
          <div class="heng"></div>
          <div class="area-content">
            <div class="area"><a href="http://anhui.6ocbx.com">安徽</a></div>
            <div class="area"><a href="http://beijing.6ocbx.com">北京</a></div>
            <div class="area">
              <a href="http://shanghai.6ocbx.com">上海</a>
            </div>
            <div class="area">
              <a href="http://guangdong.6ocbx.com">广东</a>
            </div>
            <div class="area">
              <a href="http://shenzhen.6ocbx.com">深圳</a>
            </div>
            <div class="area"><a href="http://tianjin.6ocbx.com">天津</a></div>
          </div>
          <!-- <div style="width: 100%;height: 15px;"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useCounterStore } from "../../pain/doc/index";
import { classification, informationDetails } from "../../Api/doc/index.js";
const aaa = useCounterStore();

const ip = ref("https://api.6ocbx.com/");
// 标签页
const activeName = ref();
const memberList = reactive([]);
const router = useRouter();
classification().then((res) => {
  if (res.data.code == 1) {
    memberList.value = res.data.data;
  } else {
    ElMessage.error(res.data.msg);
  }
});
const handleClick = (event) => {
  if (event.id == 1) {
    router.push({
      path: "/doc",
    });
  } else if (event.id == 2) {
    router.push({
      path: "/selected",
    });
  } else if (event.id == 3) {
    router.push({
      path: "/wikipedia",
    });
  }
};
const Jump = () => {
  router.push({
    path: "/search",
  });
};
const Jump1 = (event) => {
  router.push({
    path: `/article/${event}`,
  });
};
const Jump2 = (event) => {
  let url = router.resolve({
    path: `/searchInfo/${event}`,
  });
  window.open(url.href, "_blank");
};
//详情
const list = ref();
const list1 = ref();
const relatedBanners = reactive([]);
const id = router.currentRoute.value.params.id;
const form = reactive({
  id: id,
});
informationDetails(form).then((res) => {
  if (res.data.code == 1) {
    list.value = res.data.data.list.title;
    list1.value = res.data.data.list.startdate;
    popularList.value = res.data.data.hot_list;
    Notice.value = res.data.data.list.content;
    relatedBanners.value = res.data.data.correlation_list;
    console.log();
  } else {
    ElMessage.error(res.data.msg);
  }
});
const Notice = ref("");

//热门文章
const popularList = reactive([]);
//热门地区
const areaList = reactive([
  { title: "北京地区" },
  { title: "上海地区" },
  { title: "上海地区" },
  { title: "广东地区" },
  { title: "江苏地区" },
  { title: "河北地区" },
  { title: "吉林地区" },
  { title: "辽宁地区" },
  { title: "安徽地区" },
]);
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
.tabs {
  width: 1200px;
  height: 100%;
  margin: 10px auto;
  display: flex;
}
.tabs-left {
  width: 100%;
  // height: 100vh;
  background-color: #ffffff;
}
.el-tabs {
  width: 930px;
  // height: 300px;
  background-color: #fff;
  padding: 0;
}
.tabs-right {
  width: 260px;
  height: 100%;
  margin-left: 10px;
}
.popularArticles {
  width: 260px;
  // height: 244px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  // display: flex;
  padding: 0 10px;
}
.top {
  // width: 260px;
  height: 56px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  display: flex;
  // border-right: 1px solid #DDD;
  img {
    width: 14px;
    height: 16px;
    margin-top: 20px;
  }
}
.el-pagination {
  width: 100%;
  padding-left: 20px;
  background-color: #fff;
  // padding-bottom: 40px;
}
.top-title {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 56px;
  color: #333333;
  margin-left: 9px;
  opacity: 1;
}
.heng {
  width: 240px;
  height: 1px;
  background: #dddddd;
  opacity: 1;
  border-radius: 0px;
}
.content {
  width: 100%;
  display: flex;
  margin-top: 11px;
}
.Number {
  width: 18px;
  height: 18px;
  background: #eeeeee;
  opacity: 1;
  border-radius: 2px;
  text-align: center;
}
.active {
  width: 18px;
  height: 18px;
  background: #6675ff;
  opacity: 1;
  border-radius: 2px;
  text-align: center;
  color: #fff;
}
.content-1 {
  width: 213px;
  height: 15px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
  opacity: 1;
  overflow: hidden; //溢出隐藏
  white-space: nowrap; //禁止换行
  text-overflow: ellipsis; //...
  margin-left: 6px;
}
.area {
  display: inline-block;
}
.area-content {
  width: 100%;
  height: 115px;
  // padding: 20px 0;
}
.area {
  width: 56px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
  opacity: 1;
  margin: 15px 12px 0 12px;
}
.list-content {
  width: 100%;
  // height: 170px;
  display: flex;
  padding: 20px 0;
  border-top: 1px solid #ddd;
  // margin: 5px 0;
  // padding-bottom: 15px;
}
.list-left {
  width: 250px;
  height: 132px;
  img {
    width: 100%;
    height: 100%;
  }
}
.list-right {
  width: 620px;
  margin-left: 20px;
  position: relative;
}
.list-t1 {
  // width: 510px;
  height: 18px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 20px;
  color: #333333;
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 10px;
}
.list-t2 {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 28px;
  color: #a9b1be;
  opacity: 1;
  display: -webkit-box; /* 必须设置display属性为-webkit-box */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  -webkit-box-orient: vertical; /* 垂直方向上的换行 */
}
.list-time {
  // width: 72px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #a9b1be;
  opacity: 1;
  position: absolute;
  bottom: 4px;
  img {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: -3px;
  }
}
.breadcrumb {
  display: flex;
  margin-left: 40px;
  margin-top: 20px;
  // background-color: #fff;
}
.dq {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 26px;
  color: #a9b1be;
  opacity: 1;
}
.el-breadcrumb {
  margin-top: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #a9b1be;
  opacity: 1;
}

.mainBody {
  width: 100%;
  background-color: #fff;
  padding: 20px 40px;
}
.mainBody-1 {
  // width: 510px;
  height: 18px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 20px;
  color: #333333;
  opacity: 1;
}
.sj {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #a9b1be;
  opacity: 1;
  margin: 20px 0;
  img {
    width: 14px;
    height: 14px;
    margin-top: -2px;
    margin-right: 4px;
  }
}
.tiao {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #6675ff;
  opacity: 1;
  margin-bottom: 50px;
}
:deep() {
  .el-tabs__nav {
    margin-left: 40px;
    height: 56px;
    line-height: 56px;
  }
  .el-tabs__item {
    height: 56px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
    margin-right: 50px;
    padding: 0;
  }
  .is-active {
    color: #6675ff;
  }
  .el-tabs__header {
    margin: 0;
  }
  // .el-tabs__nav-scroll{

  // }
  .el-tabs__content {
    margin: 0 20px;
  }
}
a{
  color: #000;
}
a :hover{
  color: #000;
}
</style>
